<template>
  <el-card class="resource-card" shadow="hover" @click="handleCardClick">
    <!-- 资源封面图片 -->
    <div class="resource-cover">
      <el-image
        :src="props.resources.posterlink"
        class="cover-image"
        fit="cover"
        :preview-src-list="[props.resources.posterlink]"
        :initial-index="0"
        preview-teleported
      >
        <template #error>
          <div class="image-placeholder">
            <el-icon class="placeholder-icon"><Picture /></el-icon>
            <span class="placeholder-text">暂无图片</span>
          </div>
        </template>
      </el-image>
      
      <!-- 悬浮操作按钮 -->
      <div class="cover-overlay">
        <el-button
          type="success"
          :icon="Link"
          circle
          size="large"
          @click.stop="handleOpenLink"
        />
      </div>
    </div>
    
    <!-- 卡片内容 -->
    <div class="card-content">
      <!-- 用户信息区域 -->
      <div class="user-section">
        <el-avatar
          :src="props.resources.userInfo.avatar"
          :size="40"
          class="user-avatar"
          @click.stop="handleUserClick"
        >
          <el-icon><User /></el-icon>
        </el-avatar>
        
        <div class="user-info">
          <div class="user-name" @click.stop="handleUserClick">
            {{ props.resources.userInfo.user.name }}
          </div>
          <div class="publish-time">
            <el-icon class="time-icon"><Clock /></el-icon>
            {{ formatTime(props.resources.updatedAt || props.resources.createdAt) }}
          </div>
        </div>
        
        <el-dropdown trigger="click" @click.stop>
          <el-button type="text" :icon="MoreFilled" />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleShare">
                <el-icon><Share /></el-icon>
                分享资源
              </el-dropdown-item>
              <el-dropdown-item @click="handleCollect">
                <el-icon><Star /></el-icon>
                收藏资源
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      
      <!-- 资源标题 -->
      <h3 class="resource-title">
        {{ props.resources.title || '暂无标题' }}
      </h3>
      
      <!-- 资源描述 -->
      <p class="resource-description">
        {{ props.resources.description || '暂无描述' }}
      </p>
      
      <!-- 底部操作区 -->
      <div class="card-footer">
        <div class="tags">
          <el-tag size="small" type="info">资源</el-tag>
        </div>
        
        <el-button
          type="primary"
          size="small"
          :icon="Right"
          @click.stop="handleOpenLink"
        >
          查看详情
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { onMounted } from 'vue'
import dayjs from 'dayjs'
import { 
  Picture, 
  User, 
  Clock, 
  View, 
  Link, 
  MoreFilled, 
  Share, 
  Star, 
  Right 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import router from '../../router'

const props = defineProps({
  resources: {
    type: Object,
    required: true
  }
})

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD')
}

// 处理卡片点击
const handleCardClick = () => {
  if (props.resources.link) {
    window.open(props.resources.link, '_blank')
  }
}

// 处理用户点击
const handleUserClick = () => {
  router.push({ path: `user/${props.resources.userid}/article` })
}


// 处理打开链接
const handleOpenLink = () => {
  if (props.resources.link) {
    window.open(props.resources.link, '_blank')
  } else {
    ElMessage.warning('暂无链接地址')
  }
}

// 处理分享
const handleShare = () => {
  if (navigator.share) {
    navigator.share({
      title: props.resources.title || '资源分享',
      text: props.resources.description || '发现一个不错的资源',
      url: props.resources.link
    })
  } else {
    // 复制链接到剪贴板
    navigator.clipboard.writeText(props.resources.link || window.location.href)
    ElMessage.success('链接已复制到剪贴板')
  }
}

// 处理收藏
const handleCollect = () => {
  ElMessage.success('收藏功能待实现')
}

onMounted(() => {})
</script>

<style scoped lang="less">
.resource-card {
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  background: #fff;
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    
    .cover-overlay {
      opacity: 1;
    }
    
    .cover-image {
      transform: scale(1.05);
    }
  }
  
  :deep(.el-card__body) {
    padding: 0;
  }
}

// 封面图片区域
.resource-cover {
  position: relative;
  height: 200px;
  overflow: hidden;
  
  .cover-image {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
  }
  
  .image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: #909399;
    
    .placeholder-icon {
      font-size: 48px;
      margin-bottom: 8px;
    }
    
    .placeholder-text {
      font-size: 14px;
    }
  }
  
  .cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}

// 卡片内容区域
.card-content {
  padding: 20px;
}

// 用户信息区域
.user-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  
  .user-avatar {
    cursor: pointer;
    transition: transform 0.2s ease;
    
    &:hover {
      transform: scale(1.1);
    }
  }
  
  .user-info {
    flex: 1;
    
    .user-name {
      font-size: 14px;
      font-weight: 600;
      color: #2c3e50;
      cursor: pointer;
      transition: color 0.2s ease;
      margin-bottom: 4px;
      
      &:hover {
        color: #409eff;
      }
    }
    
    .publish-time {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: #909399;
      
      .time-icon {
        font-size: 12px;
      }
    }
  }
}

// 资源标题
.resource-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 12px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 资源描述
.resource-description {
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 底部操作区
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  .tags {
    display: flex;
    gap: 8px;
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .resource-card {
    margin-bottom: 16px;
  }
  
  .resource-cover {
    height: 160px;
  }
  
  .card-content {
    padding: 16px;
  }
  
  .resource-title {
    font-size: 15px;
  }
  
  .resource-description {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
}
</style>
